layui.use(['jquery', 'form', 'layer'], function() {
    $ = layui.jquery;
    /******************************** Part 01 初始化开始**********************************/
        //定义全局变量--数组
    var newText = new Array();
    var existedText = new Array();

    $(function () {
        $(".show-labelitem").on("click", function () {
            $(this).hide();
            $(".hide-labelitem").show();
            $("#labelItem").show();
        });

        $(".hide-labelitem").on("click", function () {
            $(this).hide();
            $(".show-labelitem").show();
            $("#labelItem").hide();
        });

        // $("input[name='newtext']").val('');          //新建的标签文本，要存入数据库的
        // $("input[name='existedtext']").val('');

        //给标签库里的标签添加点击事件
        $(".label-item").on("click", "li", function () {
            var id = $(this).attr("data");
            var text = $(this).children("span:nth-child(2)").html();
            if ($(this).hasClass("selected")) {
                return false;
            }
            if (addLabel(id, text)) {                  //添加，并要把标签库里相应的标签设置为已选择
                $(this).addClass("selected");
            }
        });

        resetNewText();
        resetExistedText();
    })

    /********************************初始化结束**********************************/

    /************ Part 02 设置数组和input **************/
    //2、3、4：数据同时存到 数组 和 input。数组：方便检索；input：方便观察     数组和文字，顺序一致
    function addNewText(labelName) {
        /*****2+***文字，数组 各自增****/
        valtext = $("input[name='newtext']").val();
        valtext += labelName + ',';
        $("input[name='newtext']").val(valtext);
        newText.push(labelName);
    }

    function removeNewText(labelName) {
        valtext = '';
        var index = newText.indexOf(labelName);
        if (index !== -1) {
            newText.splice(index, 1);
        }
        for (i = 0; i < newText.length; i++) {
            valtext += newText[i] + ',';
        }
        $("input[name='newtext']").val(valtext);

    }

    function resetExistedText() {
        /******4**根据 标签库列表 生成单独的数组和文字*****/
        existedText = [];   //首先要清空
        valtext = '';
        for (i = 0; i < $(".label-item").children("li").length; i++) {
            var text = $(".label-item").children("li").eq(i).children("span:nth-child(2)").html();
            existedText[i] = text;
            valtext += existedText[i] + ',';
        }

        $("input[name='existedtext']").val(valtext);
    }

    function resetNewText() {
        newText = [];
        valtext = '';
        $("li", "#div_tags_show").each(function(index, item){
            var text = $(item).text();
            newText[index] = text;
            valtext += newText[index] + ',';
        });

        $("input[name='newtext']").val(valtext);
    }


    /************ 设置数组和input结束 **********/

    /************ Part 03 添加 *************/
    //添加自定义标签
    $("#addTagBtn").on("click", function () {      // 3情况：重复、标签库、新增
        var labelName = $("#tagName").val();
        if (labelName != null && labelName != "") {
            var indexOfselected = newText.indexOf(labelName);
            var indexOfexisted = existedText.indexOf(labelName);
            if (indexOfselected !== -1)     //已经存在于已选择，不添加
            {
                tips("标签已存在！");
                return;
            }
            else if (indexOfexisted !== -1) //已经存在于标签库，添加，并要把标签库里相应的标签设置为已选择
            {
                var li = $(".label-item").children("li").eq(indexOfexisted);
                var id = li.attr("data");
                if (addLabel(id, labelName)) {
                    li.addClass("selected");
                }
                return;
            }
            else {
                if (addLabel(0, labelName))   //新添加的标签，添加，并2+
                {
                    addNewText(labelName);
                }

                $("#tagName").val("");
            }
        }
        else {
            tips("请填写标签名！");
        }

    });

    //添加标签到最上面
    function addLabel(id, text) {
        var num = 10;              //标签最多个数
        if ($(".label-selected").children("li").length >= num) {
            tips("最多可以选择" + num + "个");
            return false;
        }

        var labelHTML = getappendHTML(id, text);
        $(".label-selected").append(labelHTML);
        return true;
    }


    /************************************************ Part 04 删除************************************/
    //删除已选标签
    $(".label-selected").on("click", "li .delete", function () {
        var id = $(this).parent().attr("data");
        var text = $(this).parent().text();
        //删除最上面
        $(this).parent().remove();
        removeNewText(text);
        $(".label-item").find("li[data='" + id + "']").removeClass("selected");

    });

    /************************************************************************************/
    function getappendHTML(id, text) {
        return "<li data='" + id + "'>" + text + "<div class='delete'></div></li>";
    }

    function tips(content) {
        layer.open({
            type: 1,
            offset: 'auto', //具体配置参考：offset参数项
            title: '提示',
            content: '<div style="padding: 20px 80px;">' + content + '</div>',
            btn: '确定',
            btnAlign: 'c', //按钮居中
            yes: layer.closeAll()
        });
    }
});
